<template>
	<view class="flex-center">
		<!-- #ifdef H5 -->
		<div id="captcha"></div>
		<!-- #endif -->

		<!-- #ifdef APP-PLUS -->
		<captcha ref="captcha" :config="config" @captchaSuccess="captchaSuccess" @captchaError="captchaError"
			@captchaFail="captchaFail" @captchaReady="captchaReady" @captchaClose="captchaClose"></captcha>
<!-- 		<button class="btn-submit" @click="btnSubmit">打开验证码</button>
		<div class="item">
			<radio-group class="radio-group" @change="radioChange">
				<label class="radio">
					<radio value="match" /> 消消乐
				</label>
				<label class="radio">
					<radio value="winlinze" /> 五子棋
				</label>
				<label class="radio">
					<radio value="slide" checked="1" /> 滑动
				</label>
				<label class="radio">
					<radio value="icon" /> 图标
				</label>
				<label class="radio">
					<radio value="ai" /> 一点即过
				</label>
				<label class="radio">
					<radio value="word" /> 文字
				</label>
				<label class="radio">
					<radio value="phrase" /> 语序
				</label>
				<label class="radio">
					<radio value="nine" /> 九宫格
				</label>
			</radio-group>
		</div> -->
		<!-- #endif -->
	</view>
</template>
<script>
	import captcha from "./components/index.vue";
	// import { jyCaptchaId } from '@/config/index.js'  // 获取jy的key
	export default {
		data() {
			return {
				config: {
					captchaId: '',
					riskType: "icon",
				},
			};
		},
		mounted() {
			this.config.captchaId = this.appConfig.jyxingweiid
		},
		components: {
			captcha,
		},
		methods: {
			captchaSuccess(result) { // app端的回调
				console.log(result)
				this.$emit('success', result)
			},
			captchaError(e) { // app端的回调
				// uni.showToast({
				// 	title: JSON.stringify(e),
				// 	icon: "none",
				// 	duration: 2000,
				// });
			},
			captchaReady() { // app端的回调

			},
			captchaFail() { // app端的回调
				// uni.showToast({
				// 	title: 'captchaFail',
				// 	icon: "none",
				// 	duration: 2000,
				// });
			},
			captchaClose() { // app端的回调
				// uni.showToast({
				// 	title: 'captchaClose',
				// 	icon: "none",
				// 	duration: 2000,
				// });
			},
			radioChange(e) {
				this.config.riskType = e.detail.value;
			},
			btnSubmit: function() { // app端bind模式唤醒验证码的方法
				this.$refs.captcha.showCaptcha();
			},
			showCaptcha() {
				// 此处为web场景下接入方式，需要用条件编译兼容处理
				// #ifdef  H5
				var _this = this
				var script = document.createElement('script');
				script.src = "https://static.geetest.com/v4/gt4.js";
				document.body.appendChild(script);
				script.onload = script.onreadystatechange = function() {
					initGeetest4({
						captchaId: _this.appConfig.jyxingweiid,
						product: 'bind',
						riskType: 'icon'
					}, function(captcha) {
						captcha.showCaptcha()
						captcha.onReady(function() {
							//验证码ready之后才能调用showCaptcha方法显示验证码
						}).onSuccess(function() {
							//your code,结合您的业务逻辑重置验证码
							var result = captcha.getValidate();
							// result.pass_token = '9999'
							_this.$emit('success', result)
							captcha.reset()
						}).onError(function() {
							//your code
						})
					});
				};
				// #endif
				// #ifdef APP
				this.btnSubmit()
				// #endif
			}
		},
	};
</script>

<style lang="scss">

</style>